<template lang="html">
 <div class="main">
   <panel title="年度出访情况" class="panel">
     <router-link style="font-size: 16px;color: #000; font-family: 新宋体;" slot="right" :to="{ path: '/warn/yearVisit'}">图表分析</router-link>
     <div class="body">
       <el-table class="table"  max-height="470" size="mini"
          :data="tableData" @row-click="selectRow" :row-style="rowStyle" :cell-style="cellStyle">
          <el-table-column
            prop="month"
            width="120"
            label="月份">
          </el-table-column>
          <el-table-column label="团组数">
            <el-table-column
              prop="zzt"
              label="自组团"
              width="70">
            </el-table-column>
            <el-table-column
              prop="zzskt"
              label="自组双跨团"
              width="100">
            </el-table-column>
            <el-table-column
              prop="cjskt"
              label="参加双跨团"
              width="100">
            </el-table-column>
            <el-table-column
              prop="tsxj"
              label="小计"
              width="70">
            </el-table-column>
          </el-table-column>
          <el-table-column label="人次数">
            <el-table-column
              prop="sbj"
              label="省部级"
              width="80">
            </el-table-column>
            <el-table-column
              prop="tjj"
              label="厅局级"
              width="80">
            </el-table-column>
            <el-table-column
              prop="cjyx"
              label="处级以下"
              width="80">
            </el-table-column>
            <el-table-column
              prop="rcxj"
              label="小计"
              width="70">
            </el-table-column>
          </el-table-column>
          <el-table-column label="经费支出情况（元）">
            <el-table-column
              prop="czjf"
              label="财政经费"
              width="80">
            </el-table-column>
            <el-table-column
              prop="qyjf"
              label="企业经费"
              width="80">
            </el-table-column>
            <el-table-column
              prop="syjf"
              label="事业经费"
              width="80">
            </el-table-column>
            <el-table-column
              prop="kyjf"
              label="科研经费"
              width="80">
            </el-table-column>
            <el-table-column
              prop="wfcd"
              label="外方承担"
              width="80">
            </el-table-column>
            <el-table-column
              prop="fyxj"
              label="小计"
              width="70">
            </el-table-column>
          </el-table-column>
          </el-table>
     </div>
   </panel>
 </div>
</template>

<script>
import panel from '@/components/panel.vue';
export default {
  data () {
    return {
      loading: false,
      tableData: []
    };
  },
  components: {
    panel
  },
  watch: {
  },
  methods: {
    rowStyle ({row}) {
      if (row.month && row.month.indexOf('月') === -1) {
        return {'backgroundColor': '#eee'};
      }
      return {};
    },
    cellStyle ({column}) {
      if (column.label === '小计') {
        return {'backgroundColor': '#eee', 'height': '20px'};
      }
      return {};
    },
    selectRow (row) {
      this.$router.push('/warn/table/' + row.name);
    },
    loadData () {
      //
      let data = [
        {
          month: '1月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '2月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '3月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '第一季合计',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '4月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '5月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '6月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '上半年合计',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '7月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '8月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '9月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '第三季合计',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '10月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '11月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '12月',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }, {
          month: '全年合计',
          zzt: 201,
          zzskt: 100,
          cjskt: 20,
          tsxj: 300,
          sbj: 40,
          tjj: 200,
          cjyx: 1000,
          rcxj: 300,
          czjf: 1000,
          qyjf: 2000,
          syjf: 2100,
          kyjf: 2103,
          wfcd: 2010,
          fyxj: 300
        }
      ];
      this.tableData = data;
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.loading = true;
      this.loadData();
    });
  }
};
</script>

<style lang="css" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  .panel {
    height: 100%;
    width: 100%;
    position: relative;
   .body {
     height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     padding-left: 10px;
     .table {
       margin: 10px;
       background-color: inherit;
       margin-right: 30px;
       height: 100%;
       width: 100%;
     }
   }
  }
}

</style>
